import _ from 'lodash';
import React from 'react';
import { Input, Icon } from 'antd';
import { events } from './EventMock';
import classNames from 'classnames';

export default class Left extends React.Component {

  state = {
    searchValue: ''
  };

  onLiClick = (item) => {
    const { setId } = this.props;

    if (item.children) return;
    setId(item.id);
  }

  onChange = (e) => this.setState({ searchValue: e.target.value })
  
  onClear = () => this.setState({searchValue: ''})

  render() {
    const { selectId } = this.props;
    const { searchValue } = this.state;
    const cloneEvents = _.cloneDeep(events);

    cloneEvents.forEach(event => {
      event.content.forEach(item => {
        if(item.children) {
          item.children = item.children.filter(child => (!!~child.sign.toLowerCase().indexOf(searchValue.toLowerCase())) || !!~child.desc.toLowerCase().indexOf(searchValue.toLowerCase()));
        }
      });

      event.content = event.content.filter(item => {
        if (!item.children) return !!~item.sign.toLowerCase().indexOf(searchValue.toLowerCase()) || !!~item.desc.toLowerCase().indexOf(searchValue.toLowerCase());
        if(item.children.length === 0) return false;
        return true;
      });
    })

    return (
      <div className='left' >
        <div className='search'>
          <Input placeholder="请输入函数名称或描述" value={searchValue} onChange={this.onChange} />
          {
            searchValue && 
            <div className='clear' onClick={this.onClear}><Icon type="cross" /></div>
          }
        </div>
        <div className='functions'>
          {
            cloneEvents.map(event => {
              return (
                <div>
                  {
                    event.content.length > 0 &&
                    <div className='event'>
                      <div className='title'>{event.title}</div>
                      <ul>
                        {
                          event.content.map(item => {
                            const liCls = classNames({
                              active: item.id === selectId,
                              'fn-item': !item.children,
                            })

                            return (
                              <li style={{padding: item.children && '7px 0'}} className={liCls} onClick={() => this.onLiClick(item)}>
                                <div style={{'padding-left': item.children && '10px'}} className='sign'>{item.sign}</div>
                                <div style={{ 'padding-left': item.children && '10px' }} className='desc'>{item.desc}</div>
                                {
                                  item.children &&
                                  <React.Fragment>
                                    <div className='children'>
                                      <ul>
                                        {
                                          item.children.map(child => {
                                            const liCls = classNames({
                                              active: child.id === selectId,
                                              'fn-item': !child.children
                                            });
                                            return (
                                              <li className={liCls} onClick={() => this.onLiClick(child)}>
                                                <div className='sign'>{child.sign}</div>
                                                <div className='desc'>{child.desc}</div>
                                              </li>
                                            )
                                          })
                                        }
                                      </ul>
                                    </div>
                                  </React.Fragment>
                                }
                              </li>
                            )
                          })
                        }
                      </ul>
                    </div>
                  }
                </div>
              );
            })
          }
        </div>
      </div>
    );
  }
} 